<template>
    <div class="con">
        <div class="con-top">
            <div>
                <h2>217021468</h2>
                <p style="color:#fff">累计确诊</p>
            </div>
            <div>
                <h2>46987153</h2>
                <p style="color:#fff">现存确诊</p>
            </div>
            <div>
                <h2>165524088</h2>
                <p style="color:#fff">累计治愈</p>
            </div>
            <div>
                <h2>450227</h2>
                <p style="color:#fff">累计死亡</p>
            </div>
        </div>
        <div class="con-but">
            <p>累计确诊</p>
            <p>现存确诊</p>
        </div>
        <div class="con-yuan">
            <div class="con-jt"></div>
            <div class="con-dq"></div>
            <div class="con-img"> </div>
            <div id="add">

            </div>
        </div>
    </div>
</template>
  
<script setup>
import * as echarts from "echarts";
import $ from 'jquery'
import { ref, reactive, toRefs, onMounted } from 'vue'
import { useStore } from 'vuex'
import { useRouter, useRoute } from 'vue-router'
import '../assets/world'
const router = useRouter()
const route = useRoute()
const store = useStore()
const data = reactive({})

onMounted(() => {
    // dq()
    let datas = []
    let fn = new Promise((resolve, reject) => {
        $.ajax({
            url: "https://view.inews.qq.com/g2/getOnsInfo?name=disease_foreign",
            dataType: 'jsonp',
            success(res) {
                // console.log(res,28);
                let listData = JSON.parse(res.data)
                console.log(listData, 265);
                let map = listData.foreignList
                resolve({ map })
            },
        })
    })
    fn.then(res => {
        console.log(res, 36);
        datas = res
        dq(datas)
    })
})


function dq(obj) {
    let myLeft = echarts.init(document.querySelector("#add"))
    console.log(obj);
    let arr = []
    obj.map.forEach(item => {
        arr.push({
            name: item.name,
            value: item.nowConfirm
        })
    })
    let nameMap = {
        Afghanistan: "阿富汗",
        Singapore: "新加坡",
        Angola: "安哥拉",
        Albania: "阿尔巴尼亚",
        "United Arab Emirates": "阿联酋",
        Argentina: "阿根廷",
        Armenia: "亚美尼亚",
        "French Southern and Antarctic Lands": "法属南半球和南极领地",
        Australia: "澳大利亚",
        Austria: "奥地利",
        Azerbaijan: "阿塞拜疆",
        Burundi: "布隆迪",
        Belgium: "比利时",
        Benin: "贝宁",
        "Burkina Faso": "布基纳法索",
        Bangladesh: "孟加拉国",
        Bulgaria: "保加利亚",
        "The Bahamas": "巴哈马",
        "Bosnia and Herzegovina": "波斯尼亚和黑塞哥维那",
        Belarus: "白俄罗斯",
        Belize: "伯利兹",
        Bermuda: "百慕大",
        Bolivia: "玻利维亚",
        Brazil: "巴西",
        Brunei: "文莱",
        Bhutan: "不丹",
        Botswana: "博茨瓦纳",
        "Central African Republic": "中非共和国",
        Canada: "加拿大",
        Switzerland: "瑞士",
        Chile: "智利",
        China: "中国",
        "Ivory Coast": "象牙海岸",
        Cameroon: "喀麦隆",
        "Democratic Republic of the Congo": "刚果民主共和国",
        "Republic of the Congo": "刚果共和国",
        Colombia: "哥伦比亚",
        "Costa Rica": "哥斯达黎加",
        Cuba: "古巴",
        "Northern Cyprus": "北塞浦路斯",
        Cyprus: "塞浦路斯",
        "Czech Republic": "捷克共和国",
        Germany: "德国",
        Djibouti: "吉布提",
        Denmark: "丹麦",
        "Dominican Republic": "多明尼加共和国",
        Algeria: "阿尔及利亚",
        Ecuador: "厄瓜多尔",
        Egypt: "埃及",
        Eritrea: "厄立特里亚",
        Spain: "西班牙",
        Estonia: "爱沙尼亚",
        Ethiopia: "埃塞俄比亚",
        Finland: "芬兰",
        Fiji: "斐",
        "Falkland Islands": "福克兰群岛",
        France: "法国",
        Gabon: "加蓬",
        "United Kingdom": "英国",
        Georgia: "格鲁吉亚",
        Ghana: "加纳",
        Guinea: "几内亚",
        Gambia: "冈比亚",
        "Guinea Bissau": "几内亚比绍",
        Greece: "希腊",
        Greenland: "格陵兰",
        Guatemala: "危地马拉",
        "French Guiana": "法属圭亚那",
        Guyana: "圭亚那",
        Honduras: "洪都拉斯",
        Croatia: "克罗地亚",
        Haiti: "海地",
        Hungary: "匈牙利",
        Indonesia: "印度尼西亚",
        India: "印度",
        Ireland: "爱尔兰",
        Iran: "伊朗",
        Iraq: "伊拉克",
        Iceland: "冰岛",
        Israel: "以色列",
        Italy: "意大利",
        Jamaica: "牙买加",
        Jordan: "约旦",
        Japan: "日本",
        Kazakhstan: "哈萨克斯坦",
        Kenya: "肯尼亚",
        Kyrgyzstan: "吉尔吉斯斯坦",
        Cambodia: "柬埔寨",
        Kosovo: "科索沃",
        Kuwait: "科威特",
        Laos: "老挝",
        Lebanon: "黎巴嫩",
        Liberia: "利比里亚",
        Libya: "利比亚",
        "Sri Lanka": "斯里兰卡",
        Lesotho: "莱索托",
        Lithuania: "立陶宛",
        Luxembourg: "卢森堡",
        Latvia: "拉脱维亚",
        Morocco: "摩洛哥",
        Moldova: "摩尔多瓦",
        Madagascar: "马达加斯加",
        Mexico: "墨西哥",
        Macedonia: "马其顿",
        Mali: "马里",
        Myanmar: "缅甸",
        Montenegro: "黑山",
        Mongolia: "蒙古",
        Mozambique: "莫桑比克",
        Mauritania: "毛里塔尼亚",
        Malawi: "马拉维",
        Malaysia: "马来西亚",
        Namibia: "纳米比亚",
        "New Caledonia": "新喀里多尼亚",
        Niger: "尼日尔",
        Nigeria: "尼日利亚",
        Nicaragua: "尼加拉瓜",
        Netherlands: "荷兰",
        Norway: "挪威",
        Nepal: "尼泊尔",
        "New Zealand": "新西兰",
        Oman: "阿曼",
        Pakistan: "巴基斯坦",
        Panama: "巴拿马",
        Peru: "秘鲁",
        Philippines: "菲律宾",
        "Papua New Guinea": "巴布亚新几内亚",
        Poland: "波兰",
        "Puerto Rico": "波多黎各",
        "North Korea": "北朝鲜",
        Portugal: "葡萄牙",
        Paraguay: "巴拉圭",
        Qatar: "卡塔尔",
        Romania: "罗马尼亚",
        Russia: "俄罗斯",
        Rwanda: "卢旺达",
        "Western Sahara": "西撒哈拉",
        "Saudi Arabia": "沙特阿拉伯",
        Sudan: "苏丹",
        "South Sudan": "南苏丹",
        Senegal: "塞内加尔",
        "Solomon Islands": "所罗门群岛",
        "Sierra Leone": "塞拉利昂",
        "El Salvador": "萨尔瓦多",
        Somaliland: "索马里兰",
        Somalia: "索马里",
        "Republic of Serbia": "塞尔维亚",
        Suriname: "苏里南",
        Slovakia: "斯洛伐克",
        Slovenia: "斯洛文尼亚",
        Sweden: "瑞典",
        Swaziland: "斯威士兰",
        Syria: "叙利亚",
        Chad: "乍得",
        Togo: "多哥",
        Thailand: "泰国",
        Tajikistan: "塔吉克斯坦",
        Turkmenistan: "土库曼斯坦",
        "East Timor": "东帝汶",
        "Trinidad and Tobago": "特里尼达和多巴哥",
        Tunisia: "突尼斯",
        Turkey: "土耳其",
        "United Republic of Tanzania": "坦桑尼亚",
        Uganda: "乌干达",
        Ukraine: "乌克兰",
        Uruguay: "乌拉圭",
        "United States": "美国",
        Uzbekistan: "乌兹别克斯坦",
        Venezuela: "委内瑞拉",
        Vietnam: "越南",
        Vanuatu: "瓦努阿图",
        "West Bank": "西岸",
        Yemen: "也门",
        "South Africa": "南非",
        Zambia: "赞比亚",
        Korea: "韩国",
        Tanzania: "坦桑尼亚",
        Zimbabwe: "津巴布韦",
        Congo: "刚果",
        "Central African Rep.": "中非",
        Serbia: "塞尔维亚",
        "Bosnia and Herz.": "波黑",
        "Czech Rep.": "捷克",
        "W. Sahara": "西撒哈拉",
        "Lao PDR": "老挝",
        "Dem.Rep.Korea": "朝鲜",
        "Falkland Is.": "福克兰群岛",
        "Timor-Leste": "东帝汶",
        "Solomon Is.": "所罗门群岛",
        Palestine: "巴勒斯坦",
        "N. Cyprus": "北塞浦路斯",
        Aland: "奥兰群岛",
        "Fr. S. Antarctic Lands": "法属南半球和南极陆地",
        Mauritius: "毛里求斯",
        Comoros: "科摩罗",
        "Eq. Guinea": "赤道几内亚",
        "Guinea-Bissau": "几内亚比绍",
        "Dominican Rep.": "多米尼加",
        "Saint Lucia": "圣卢西亚",
        Dominica: "多米尼克",
        "Antigua and Barb.": "安提瓜和巴布达",
        "U.S. Virgin Is.": "美国原始岛屿",
        Montserrat: "蒙塞拉特",
        Grenada: "格林纳达",
        Barbados: "巴巴多斯",
        Samoa: "萨摩亚",
        Bahamas: "巴哈马",
        "Cayman Is.": "开曼群岛",
        "Faeroe Is.": "法罗群岛",
        "IsIe of Man": "马恩岛",
        Malta: "马耳他共和国",
        Jersey: "泽西",
        "Cape Verde": "佛得角共和国",
        "Turks and Caicos Is.": "特克斯和凯科斯群岛",
        "St. Vin. and Gren.": "圣文森特和格林纳丁斯",
    };
    let option = {
        tooltip: {
            trigger: "item",
            formatter: function (params) {
                if (params.name) {
                    return (
                        params.name +
                        " : " +
                        (isNaN(params.value) ? 0 : parseInt(params.value))
                    );
                }
            },
        },
        // 视觉映射组件
        visualMap: {
            type: "continuous", // continuous 类型为连续型  piecewise 类型为分段型
            show: true, // 是否显示 visualMap-continuous 组件 如果设置为 false，不会显示，但是数据映射的功能还存在
            // 指定 visualMapContinuous 组件的允许的最小/大值。'min'/'max' 必须用户指定。
            // [visualMap.min, visualMax.max] 形成了视觉映射的『定义域』

            // 文本样式
            textStyle: {
                fontSize: 12,
                color: "#fff",
            },
            realtime: false, // 拖拽时，是否实时更新
            calculable: true, // 是否显示拖拽用的手柄
            // 定义 在选中范围中 的视觉元素
            inRange: {
                color: [
                    "#9fb5ea",
                    "#e6ac53",
                    "#74e2ca",
                    "#85daef",
                    "#9feaa5",
                    "#5475f5",
                    "#ffc24b",
                    "#b93e26",
                ], // 图元的颜色
            },
        },

        visualMap: {
            //图例值控制
            show: true,
            type: "piecewise",
            min: 0,
            max: 10000000,
            splitNumber: 5,
            color: ["#d94e5d", "#eac736", "#50a3ba"],

            //    color: ['rgba(23,216,161,0.5)', 'rgba(244,201,7,0.5)', 'rgba(129,59,219,0.5)', 'rgba(219,51,90,0.5)'],
            //    color: ['orangered','yellow','lightskyblue'],
            calculable: true,
            textStyle: {
                color: "#fff",
                fontWeight: "bold",
            },
            // inRange: {
            //     color: ['#ffffff', '#E0DAFF', '#ADBFFF', '#9CB4FF', '#6A9DFF', '#3889FF']
            // }
            left: 30,
            bottom: 0,
            itemWidth: 15,
            itemHeight: 10,
            //    text:['合作次数','']
        },
        series: [
            {
                name: "World Population (2010)",
                type: "map",
                mapType: "world",
                // roam: true,
                itemStyle: {
                    areaColor: "#7B68EE", // 地图区域的颜色 如果设置了visualMap，areaColor属性将不起作用
                    borderWidth: 0.5, // 描边线宽 为 0 时无描边
                    borderColor: "#000", // 图形的描边颜色 支持的颜色格式同 color，不支持回调函数
                    borderType: "solid", // 描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'
                    emphasis: { label: { show: true } },
                },
                label: {
                    show: false, // 是否显示对应地名
                },
                data: arr,
                nameMap: nameMap,
            },
        ],
    };
    myLeft.setOption(option)
    window.addEventListener(
        "resize",
        function (e) {
            myLeft.resize();

        },
        false
    );

}

</script>
  
<style scoped lang='scss'>
.con {

    flex: 5;
    width: 100%;
    height: calc(100% - 80px);

    .con-yuan {
        position: relative;
        width: 100%;
        height: 750px;

        #add {
            flex: 5;
            height: 750px;
        }
    }

    .con-top {
        width: 100%;
        height: 170px;
        color: #ffeb7b;
        display: flex;
        justify-content: space-around;
        align-items: center;
        text-align: center;

        p {
            font-size: 16px;
        }

        h2 {
            margin-bottom: 10px;
            font-size: 20px;
        }

    }

    .con-but {
        width: 100%;
        height: 80px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        font-size: 16px;

        p {
            width: 200px;
            height: 60px;
            border-radius: 40px;
            background-color: #173470;
            text-align: center;
            line-height: 60px;
            font-size: 16px;
        }
    }

    .con-img {
        position: absolute;
        width: 600px;
        height: 600px;
        left: 50%;
        top: 50%;
        // transform: translate(-50%,-50%);
        animation: rotate 10s linear infinite;
        background: url(../../public/img/lbx.0dea0f97.png) no-repeat;
        background-size: 100%;

    }

    .con-jt {
        position: absolute;
        width: 550px;
        height: 550px;
        left: 50%;
        top: 50%;
        // transform: translate(-50%,-50%);
        animation: jt 10s linear infinite;
        background: url(../../public/img/jt.c268bab5.png) no-repeat;
        background-size: 100%;

    }

    .con-dq {
        position: absolute;
        width: 500px;
        height: 500px;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        background: url(../../public/img/map.bab2b509.png) no-repeat;
        background-size: 100%;

    }
}

@keyframes rotate {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes jt {
    from {
        transform: translate(-50%, -50%) rotate(360deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(0deg);
    }
}
</style>